<script setup lang="ts">
import { computed } from "vue";

interface Props {
  modelValue?: boolean;
  size?: "small" | "medium" | "large";
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  size: "small"
});
const emit = defineEmits<{
  (e: "update:modelValue", val: any): void;
}>();
const fontSize = computed(() => {
  let c = "";
  switch (props.size) {
    case "small":
      c = "text-sm";
      break;
    case "medium":
      c = "text-6xl";
      break;
    case "large":
      c = "text-8xl";
      break;
  }
  return c;
});
</script>

<template>
  <div>
    <div
      v-show="props.modelValue"
      class="iconfont icon-switch-on"
      :class="[fontSize]"
      w:text="red-500"
      @click="emit('update:modelValue', false)"
    />
    <div
      v-show="!props.modelValue"
      class="iconfont icon-switch-off"
      :class="[fontSize]"
      w:text="gray-400"
      @click="emit('update:modelValue', true)"
    />
  </div>
</template>

<style scoped lang="scss"></style>
